<template>
  <div class="about">
    <h1 @click="top">This is an about page</h1>
    <el-button @click="prev" type="primary" :disabled="btnNum<=0" >减</el-button>
    {{btnNum}}
    <el-button @click="next" type="primary" :disabled="btnNum>=10" >加</el-button>
  </div>
</template>

<script lang="ts">
import { onBeforeMount ,computed} from 'vue';
import { useRouter ,useRoute ,useLink } from 'vue-router';
import {ElButton} from 'element-plus'
import {useStore} from 'vuex'

export default {
  components:{
    [ElButton.name]:ElButton,
  },
  setup(){
    const router = useRouter();
    const store = useStore();
    onBeforeMount(()=>{
      console.log(123123)
    })0

    const top = ()=>{
      router.push("/")
    }

    const prev = () =>{
      store.commit("btnprev",'减')
    }

    const next = () =>{
      store.commit("btnNext",'加')
      
    }

    const btnNum = computed(() => {
      return store.state.user.btnNum
    })


    return {
      top,
      btnNum,
      prev,
      next
    }
  }
}
</script>
